import 'package:flutter/material.dart';

void main() {
  // 1. 运行应用程序。
  runApp(const MaterialApp(
    home: Main(),
  ));
}

class Main extends StatelessWidget {
  const Main({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Column 组件',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 500,
          color: Colors.amber,
          // 本地资源图标，记得在 pubspec.yaml 中配置。
          child: Column(
            // Column 默认主轴顶对齐，交叉轴居中对齐
            // mainAxisAlignment: MainAxisAlignment.center, // 主轴
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // 主轴
            crossAxisAlignment: CrossAxisAlignment.start, // 交叉轴
            // children 为 List<Widget> 列表，可放多个子组件
            children: [
              Image.network(
                'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
                width: 200,
              ),
              const Text('美妆效果嘎嘎不卡粉末面刷'),
              const Text('¥99.90'),
              Row(
                children: [
                  Image.network(
                    'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
                    width: 50,
                  ),
                  const Padding(padding: EdgeInsets.all(5)),
                  const Text('已售'),

                  const Text('99999'),
                  const Text('件'),
                  //弹性布局
                  Expanded(
                      child: Container(
                    color: Colors.red,
                    height: 20,
                    width: 20,
                    alignment: Alignment.center,
                    child: const Text('啊大大的啊大方发啊大大的啊大方发'),
                  )),
                ],
              ),
              Row(children: [
                Expanded(
                    flex: 1,
                    child: Container(
                      height: 86,
                      color: Colors.red,
                      child: const Text('购买'),
                    )),
                Expanded(
                    flex: 2,
                    child: Container(
                      height: 86,
                      color: Colors.green,
                    )),
                Expanded(
                    flex: 3,
                    child: Container(
                      height: 86,
                      color: Colors.blue,
                    )),
              ])
            ],
          ),
        ),
      ),
    );
  }
}
